<template>
  <div>
    <el-form ref="form" inline :model="form" label-width="120px">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="姓名:" prop="userName">
            <el-input
              v-model="form.userName"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="activeName === 'first'" :span="6">
          <el-form-item label="工作单位:" prop="workUnitName">
            <el-input
              v-model="form.workUnitName"
              placeholder="请输入工作单位"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="activeName === 'second'" :span="6">
          <el-form-item label="毕业院校:" prop="workUnitName">
            <el-input
              v-model="form.workUnitName"
              placeholder="请输入毕业院校"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="activeName === 'third'" :span="6">
          <el-form-item label="企业名称:" prop="workUnitName">
            <el-input
              v-model="form.workUnitName"
              placeholder="请输入企业名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="activeName === 'fourth'" :span="6">
          <el-form-item label="培训地点:" prop="workUnitName">
            <el-input
              v-model="form.workUnitName"
              placeholder="请输入培训地点"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="activeName === 'first'" :span="6">
          <el-form-item label="部门:" prop="department">
            <el-input
              v-model="form.department"
              placeholder="请输入部门"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="activeName === 'second'" :span="6">
          <el-form-item label="所属专业:" prop="department">
            <el-input
              v-model="form.department"
              placeholder="请输入所属专业"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="activeName === 'third'" :span="6">
          <el-form-item label="审核身份:" prop="department">
            <el-input
              v-model="form.department"
              placeholder="请输入审核身份"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="activeName === 'fourth'" :span="6">
          <el-form-item label="培训单位:" prop="department">
            <el-input
              v-model="form.department"
              placeholder="请输入培训单位"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="activeName === 'first'" :span="6">
          <el-form-item label="职务:" prop="isFullTime">
            <el-input v-model="form.id" placeholder="请输入职务"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="activeName !== 'first'" :span="6">
          <el-form-item label="状态:" prop="isFullTime">
            <el-select v-model="value" placeholder="请选择">
              <el-option label="待备案" value="1"></el-option>
              <el-option label="已备案" value="2"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="开始日期:" prop="startDate">
            <el-date-picker
              v-model="form.startDate"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束日期:" prop="endDate">
            <el-date-picker
              v-model="form.endDate"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small"
              >搜索</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="getContractList"
              >批量导出</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="handleReset"
              >清空</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="工作经历" name="first">
        <div>
          <el-table
            border
            :data="tableData"
            style="width: 95%"
            max-height="400"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="状态" align="center" />
            <el-table-column prop="userName" label="姓名" align="center" />
            <el-table-column prop="startDate" label="开始时间" align="center" />
            <el-table-column prop="endDate" label="结束时间" align="center" />
            <el-table-column
              prop="workUnitName"
              label="工作单位"
              align="center"
            />
            <el-table-column prop="department" label="部门" align="center" />
            <el-table-column prop="isOffice" label="职务" align="center" />
            <el-table-column
              prop="cooperationUnit"
              label="证明人"
              align="center"
            />
            <el-table-column prop="phone" label="联系电话" align="center" />
            <el-table-column prop="createdAt" label="创建日期" align="center" />
            <el-table-column prop="mark" label="描述" align="center" />
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageInfo.pageSize"
            :total="pageInfo.total"
            @current-change="handleChangeCurrent"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="教育经历" name="second">
        <div>
          <el-table
            border
            :data="tableData"
            style="width: 95%"
            max-height="400"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="状态" align="center" />
            <el-table-column prop="userName" label="姓名" align="center" />
            <el-table-column prop="startTime" label="入学时间" align="center" />
            <el-table-column prop="endTime" label="毕业时间" align="center" />
            <el-table-column prop="phone" label="毕业学校" align="center" />
            <el-table-column
              prop="personnelNature"
              label="所学专业"
              align="center"
            />
            <el-table-column prop="isOffice" label="学历" align="center" />
            <el-table-column
              prop="regionalAddress"
              label="创建日期"
              align="center"
            />
            <el-table-column prop="isFullTime" label="描述" align="center" />
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageInfo.pageSize"
            :total="pageInfo.total"
            @current-change="handleChangeCurrent"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="审核经历" name="third">
        <div>
          <el-table
            border
            :data="tableData"
            style="width: 95%"
            max-height="400"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="状态" align="center" />
            <el-table-column prop="userName" label="姓名" align="center" />
            <el-table-column prop="startTime" label="开始时间" align="center" />
            <el-table-column prop="endTime" label="结束时间" align="center" />
            <el-table-column prop="phone" label="审核天数" align="center" />
            <el-table-column
              prop="personnelNature"
              label="参加审核身份"
              align="center"
            />
            <el-table-column prop="isOffice" label="企业名称" align="center" />
            <el-table-column
              prop="cooperationUnit"
              label="体系"
              align="center"
            />
            <el-table-column
              prop="branchPersonnel"
              label="审核类型"
              align="center"
            />
            <el-table-column
              prop="regionalAddress"
              label="创建日期"
              align="center"
            />
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageInfo.pageSize"
            :total="pageInfo.total"
            @current-change="handleChangeCurrent"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="培训经历" name="fourth">
        <div>
          <el-table
            border
            :data="tableData"
            style="width: 95%"
            max-height="400"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="状态" align="center" />
            <el-table-column prop="userName" label="姓名" align="center" />
            <el-table-column prop="startTime" label="开始时间" align="center" />
            <el-table-column prop="endTime" label="结束时间" align="center" />
            <el-table-column prop="phone" label="培训小时" align="center" />
            <el-table-column
              prop="personnelNature"
              label="培训地点"
              align="center"
            />
            <el-table-column prop="isOffice" label="举办单位" align="center" />
            <el-table-column
              prop="cooperationUnit"
              label="培训内容"
              align="center"
            />
            <el-table-column
              prop="regionalAddress"
              label="创建日期"
              align="center"
            />
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageInfo.pageSize"
            :total="pageInfo.total"
            @current-change="handleChangeCurrent"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="提示" :visible.sync="visible" width="30%">
      <span>确认删除单号为{{ currentInfo.did }}的合同吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="handleDelete"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getContract, delContract } from "../../api/contract";
import moment from "moment";
export default {
  name: "HrPersonnelExperience",
  data() {
    return {
      activeName: "first",
      form: {
        userName: "",
        id: "",
        personnelNature: "",
        isFullTime: "",
        regionalAddress: "",
        phone: "",
        expire: "",
        startTime: "",
        endTime: "",
      },
      tableData: [
        {
          id: "1",
          isFollowed: "否",
          userName: "周星驰",
          sex: "男",
          phone: "13255668899",
          personnelNature: "劳务工",
          isOffice: "是",
          cooperationUnit: "测试合作机构",
          branchPersonnel: "天津分公司",
          regionalAddress: "北京市",
          isFullTime: "兼职",
          idNo: "4105111111111111",
          expire: "2020-08-11",
        },
      ],
      pageInfo: {
        current: 1,
        pageSize: 10,
      },
      visible: false,
      currentInfo: {},
    };
  },
  created() {
    // this.getContractList();
  },
  methods: {
    handleTabClick() {
      console.log(this.activeName);
    },
    async getContractList() {
      const { current, pageSize } = this.pageInfo;
      const res = await getContract({ ...this.form, current, pageSize });
      const { data, pageInfo } = res?.data;
      this.tableData = data?.map((x) => {
        return {
          ...x,
          time: moment(x.time).format("YYYY-MM-DD HH:mm"),
        };
      });
      this.pageInfo = pageInfo;
    },
    handleChangeCurrent(index) {
      this.pageInfo.current = index;
      //   this.getContractList();
    },
    handleReset() {
      this.$refs["form"].resetFields();
      //   this.getContractList();
    },
    handleDeletePre(info) {
      this.visible = true;
      this.currentInfo = info;
    },
    async handleDelete() {
      if (!this.currentInfo.id) {
        this.$message({
          type: "warning",
          message: "无效操作",
        });
      }
      const res = await delContract({ id: this.currentInfo.id });
      if (res?.data?.code === 0) {
        this.visible = false;
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getContractList();
      }
    },
  },
};
</script>
